import { createVNode, render } from "vue";
import nullValueFill from './nodeComponents/dataExtraction.vue'

export default function register(lf) {
    lf.register('dataExtraction', ({ HtmlNode, HtmlNodeModel, h }) => {
        class Node extends HtmlNode {
            setHtml(rootEl) {
                const { properties } = this.props.model;
                const el = document.createElement('div');
                rootEl.innerHTML = '';
                rootEl.appendChild(el);
                const myApp = createVNode(nullValueFill, {
                    props: {
                        name: properties.text,
                    },
                });
                render(myApp, el)
            }
        }
        class Model extends HtmlNodeModel {
            constructor(data, graphModel) {
                data.text = {
                    value: (data.text && data.text.value) || '普通节点',
                    x: data.x,
                    y: data.y + 50
                }
                super(data, graphModel)
            }
            initNodeData(data) {
                if (data.text) {
                    data.text.editable = false
                }
                super.initNodeData(data)
                const width = 62
                const height = 62
                this.width = width
                this.height = height
                this.anchorsOffset = [
                    [width / 2, 0],
                    [0, height / 2],
                    [-width / 2, 0],
                    [0, -height / 2],
                ]
            }
        }
        return {
            view: Node,
            model: Model
        }
    })
}
